<template>
    <div class="d11">
        <keep-alive>
            <transition>
                <component :is="shushu[xiabiao]"></component>
            </transition>
        </keep-alive>
        <div class="daohang">
            <div @click="dianji(index)" v-for="(item, index) in shuju" :key="index"
                :class="(xiabiao == index) ? 'zhuangtai' : ''">
                {{ item.name }}
            </div>
        </div>
    </div>



</template>

<script>
import Hear from './components/Hear.vue'
import liebiao from './components/liebiao.vue'
import dingdan from './components/dingdan.vue'
import my from './components/my.vue'
export default {
    name: 'App',
    data() {
        return {
            xiabiao: 0,
            shuju: [
                { name: '首页' },
                { name: '爆爆团' },
                { name: '订单' },
                { name: '我的' },
            ],
            shushu: [liebiao, Hear, dingdan, my]
        }
    },
    methods: {
        dianji(index) {
            this.xiabiao = index
        }
    }
}
</script>

<style>
.daohang {
    width: 96%;
    padding: 10px;
    display: flex;
    justify-content: space-between;
    position: fixed;
    bottom: 0px;
    border-top: 1px solid black;
    background-color: white;
}

.zhuangtai {
    color: blue;
    font-weight: 700;
}

.d1 {
    height: auto;
}

* {
    padding: 0;
    margin: 0;
}

ul,
ol,
li {
    list-style: none;
}

a,
u {
    text-decoration: none;
}

b,
strong {
    font-weight: 400;
}

i,
em {
    font-style: normal;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-size: 16px;
    font-weight: 400;
}

input {
    border: 0;
    outline: none;
}

/* 入场效果 */
.v-enter {
    /* 开始隐藏 */
    opacity: 0;
}

/* 入场动画执行状态 */
.v-enter-active {
    transition: all 1s;
}

/* 动画完成结束时效果 */
.v-enter-to {
    /* 动画完成显示 */
    opacity: 1;
}
</style>
